<template>
  <div class="app-container">
    <MarkdownRenderer :contents="demoContents" />

    <table style="width: 100%; position: relative; top: 20px">
      <tbody>
        <tr style="width: 100%">
          <td style="text-align: center">
            <el-button v-motion type="primary" :initial="{ opacity: 0, y: 100 }" :enter="{
              opacity: 1,
              y: 0,
              transition: {
                delay: 160
              }
            }" @click="router.push('/')">
              查看答案
            </el-button>

            <el-button v-motion type="primary" :initial="{
              opacity: 0,
              y: 100
            }" :enter="{
                opacity: 1,
                y: 0,
                transition: {
                  delay: 160
                }
              }" @click="submitAnswer">
              提交结果
            </el-button>
          </td>
        </tr>
      </tbody>
    </table>

    <table style="width: 100%; position: relative; top: 60px">
      <tbody>
        <tr style="width: 100%">
          <td style="text-align: left">
            <el-button v-motion type="primary" :initial="{
              opacity: 0,
              y: 100
            }" :enter="{
                opacity: 1,
                y: 0,
                transition: {
                  delay: 160
                }
              }" @click="router.push('/')">
              上一题
            </el-button>
          </td>
          <td style="text-align: center">共10题第3题</td>
          <td style="text-align: right">
            <el-button v-motion type="primary" :initial="{
              opacity: 0,
              y: 100
            }" :enter="{
                opacity: 1,
                y: 0,
                transition: {
                  delay: 160
                }
              }" @click="router.push('/')">
              下一题
            </el-button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watchEffect } from "vue";
import MarkdownRenderer from "../../components/MarkdownRenderer.vue";
import { usePqbStoreHook } from "@/store/modules/pqb";

/*const demoContents = [
  '# 例1.1\n设 $f(x+\frac{1}{x})=\frac{x+x^{3}}{1+x^{4}}$ ，则$f(x)=$_____。',
  '## 代码示例\n```js\nconst deepClone = (obj) => JSON.parse(JSON.stringify(obj))\nlet v = document.getElementById("bookId");\nint a=1, b=2, c=3;\nv=list[:1:-1]\n```',
  '### 图片展示\n![示例图片](https://picsum.photos/600/400)'
]*/
const demoContents = ref([
  "# 例1.1\n设$f(x+\\frac{1}{x})=\\frac{x+x^{3}}{1+x^{4}}$，则$f(x)=$_____。",
  '<input type="radio" name="a1" /> A. $f(x)=e^{x}$',
  '<input type="radio" name="a1" /> B. $f(x)=\\ln(x+\\sqrt{1+x^{2}})$',
  '<input type="radio" name="a1" /> C. $f(x)=\\frac{e^{x}-e^{-x}}{2}$',
  '<input type="radio" name="a1" /> D. $f(x)=x$'
]);

const question = ref(null);
const answer = ref(null);
const sessionId = ref(1);
const questionId = ref(2);
const optionId = ref(3);
const questionType = ref(3); // 问题类型：单选题、多选题、填空题、简答题
const option_prefixs = ["(A) ", "(B) ", "(C) ", "(D) "];

// 获取题目及答案
const getPqbExercise = async () => {
  usePqbStoreHook()
    .doGetPqbExercise()
    .then(res => {
      if (res.success) {
        console.log("原始请求：" + res.data.options.length + "!");
        demoContents.value = [res.data.qna.qstn_title];
        for (let i = 0; i < res.data.options.length; i++) {
          demoContents.value.push(
            option_prefixs[i] + res.data.options[i].opt_text
          );
        }
        // for (let opt in res.data.options) {
        //   demoContents.value.push(opt.opt_text);
        // }
        console.log(
          "v0.0.1请求成功: " + JSON.stringify(demoContents.value) + "!"
        );
      } else {
        console.log("登录失败");
      }
    })
    .finally(() => { });
};

onMounted(() => {
  getPqbExercise();
});

const submitAnswer = () => {
  if (questionType.value == 1) {
    processSingleOption();
  } else if (questionType.value == 2) {
    processMultiOption();
  } else if (questionType.value == 3) {
    processFillBlank();
  }
};

const processSingleOption = () => {
  var selectedOpt = null;
  var radioButtons = document.getElementsByName("radioBoxes");

  for (var i = 0; i < radioButtons.length; i++) {
    if (radioButtons[i].checked) {
      selectedOpt = radioButtons[i].value;
      break; // 找到后可以立即退出循环
    }
  }

  if (selectedOpt) {
    alert("选中的选项为: " + selectedOpt);
  } else {
    if (confirm("您还未选择任何答案，要继续吗？")) {
      alert("未完成答题，继续下一题");
    }
  }
};

const processMultiOption = () => {
  // 创建一个数组来存储选中的值
  const selectedValues = [];
  var radioButtons = document.getElementsByName("checkBoxes");

  for (var i = 0; i < radioButtons.length; i++) {
    if (radioButtons[i].checked) {
      selectedValues.push(radioButtons[i].value);
    }
  }

  if (selectedValues.length > 0) {
    alert("选中的选项为: " + selectedValues.join(",") + "!");
  } else {
    if (confirm("您还未选择任何答案，要继续吗？")) {
      alert("未完成答题，继续下一题");
    }
  }
};

const processFillBlank = () => {
  // 创建一个数组来存储选中的值
  const inputValues = [];
  var inputs = document.getElementsByName("inputs");

  for (var i = 0; i < inputs.length; i++) {
    inputValues.push(inputs[i].value);
  }

  if (inputValues.length > 0) {
    alert("选中的选项为: " + inputValues.join(",") + "!");
  } else {
    if (confirm("您还未填写任何答案，要继续吗？")) {
      alert("未完成答题，继续下一题");
    }
  }
};
</script>

<style scoped>
.app-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .app-container {
    padding: 1rem;
  }
}
</style>
